<style lang="scss" scoped>
.draw-panel {
  position: absolute;
  left: 60px;
  top: 20px;
  box-shadow: 1px 2px 4px 0 #c5c5c5;
  .title {
    background-color: #4d6390;
    height: 25px;
    font-size: 14px;
    span {
      color: white;
      line-height: 25px;
      padding-left: 10px;
    }
    i {
      float: right;
      color: white;
      line-height: 25px;
      margin-right: 10px;
    }
  }
  .draw-btn {
    display: flex;
    width: 140px;
    height: 28px;
    background-color: white;
    color: black;
    align-items: center;
    svg {
      width: 30px;
      height: 21px;
    }
  }
}
</style>

<template>
  <div class="draw-panel">
    <div class="title">
      <span>标绘</span>
      <i class="el-icon-close"></i>
    </div>
    <div class="draw-btn">
      <el-tooltip
        class="item"
        effect="dark"
        content="绘制线"
        placement="bottom"
      >
        <i @click="draw('polyline')" />
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="绘制面"
        placement="bottom"
      >
        <i @click="draw('polygon')" />
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="绘制方形"
        placement="bottom"
      >
        <i @click="draw('rectangle')" />
      </el-tooltip>
    </div>
  </div>
</template>

<script>

export default {
  name: "DrawPanel",
  props: {
    sk: Object,
    default: function () {
      return {};
    },
    drawLayer: Object,
    default: function () {
      return {}
    },
  },
  data () {
    return {
      sketchViewModel: {}
    };
  },
  methods: {
    draw (type) {
      let sk = this.sk;
      sk.create(type);
    }
  }
};
</script>
